<template>
  <div class="app-container">
    <!-- 工具栏 -->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.drugName"
          placeholder="请输入药品名称"
          size="small"
          class="filter-item"
          style="width: 140px"
        />
        <el-select
          v-model="query.toStoreId"
          clearable
          size="small"
          placeholder="流转药房"
          class="filter-item"
          style="width: 120px"
         
        >
          <template v-for="item in scoreList">
                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
              </template>
        </el-select>

        <el-select
          v-model="query.status"
          clearable
          size="small"
          placeholder="状态"
          class="filter-item"
          style="width: 120px"
         
        >
          <el-option
            v-for="item in statusList"
            :key="item.id"
            :label="item.text"
            :value="item.id"
          />
        </el-select>
        
        <rrOperation :crud="crud" @resetQuery="onResetQuery"/>
      </div>
      <crudOperation :permissions="permission"></crudOperation>
    </div>
    <!-- 表格渲染 -->
    <el-table
      ref="table"
      v-loading="crud.loading" 
      :data="crud.data"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column
      type="index"
      width="50">
    </el-table-column>
      <el-table-column v-if="columns.visible('fromDrugName')" label="药品名称" prop="fromDrugName" ></el-table-column>
      <el-table-column v-if="columns.visible('fromDrugId')" label="药品ID" prop="fromDrugId" ></el-table-column>
      <el-table-column v-if="columns.visible('fromStoreName')" label="药房名称" prop="fromStoreName" ></el-table-column>
      <el-table-column v-if="columns.visible('toDrugName')" label="流转药品名称" prop="toDrugName" ></el-table-column>
      <el-table-column v-if="columns.visible('toDrugId')" label="流转药品ID" prop="toDrugId" ></el-table-column>
      <el-table-column v-if="columns.visible('toStoreName')" label="流转药房" prop="toStoreName" ></el-table-column>
      
      <el-table-column v-if="columns.visible('status')" width="150" label="状态" prop="status" :show-overflow-tooltip="true">
          <template v-slot="slot">
              <!-- {{contentStatus(slot.row.status)}} -->
              <template v-if="slot.row.status == 0">
                <el-tag type="success">正常</el-tag>
              </template>
              <template v-else-if="slot.row.status == 1">
                <el-tag type="danger">失效</el-tag>
              </template>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
            <div class="body-content addPrescription">
                <!-- <el-button type="text" @click="onEdit(scope.row,1)">查看</el-button> -->
                <template v-if="scope.row.status == 1">
                  <el-button type="text" @click="onEdit(scope.row,3)">启用</el-button>
                </template>
                <template v-else-if="scope.row.status == 0">
                    <el-button type="text" @click="onEdit(scope.row,4)">禁用</el-button>
                </template>
                
                <el-button type="text" @click="onEdit(scope.row,2)">删除</el-button>
            </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <pagination />
    <!-- 新增、编辑供应商 -->
    <roamForm :pharmacyId="pharmacyId" :storeNames="storeName" :userNames="userAccount"></roamForm>

      <el-dialog
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="showEdit"
    title="查看"
    :show-close="false"
    width="900px"
    destroy-on-close
  >
    <el-form
      label-width="100px"
      size="small"
      ref="form"
      :model="detailData"
      :rules="rules"
      :inline="true"
    >
    <div>
       <el-form-item label="拆分药房：" prop="fromStoreName">
           <div style="width:200px;">
               <span>{{this.detailData.fromStoreName}}</span>
           </div>
      </el-form-item>

       <el-form-item label="药品查询：" label-width="120px"  prop="fromDrugName">
           <el-input v-model="detailData.fromDrugName"  style="width:200px;" disabled>
               <!-- <el-button slot="append" icon="el-icon-search" @click="selectDrug(1)"></el-button> -->
           </el-input>
      </el-form-item>
    </div>
        <el-form-item label="流转药房：" prop="toStoreId">
            <el-select
          v-model="detailData.toStoreId"
          disabled
          clearable
          size="small"
          placeholder="药房"
          class="filter-item"
          style="width: 200px"
         
        >
          <template v-for="item in scoreList">
                <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item label="药品查询：" label-width="120px"  prop="toDrugName">
           <el-input v-model="detailData.toDrugName"  style="width:200px;" disabled>
               <!-- <el-button slot="append" icon="el-icon-search" @click="selectDrug(2)"></el-button> -->
           </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancelClick">取消</el-button>
      <el-button :loading="crud.procesLoading" type="primary" @click="onClickUpdate">确认</el-button>
    </div>

    <el-dialog append-to-body
    :close-on-click-modal="false"
    :visible.sync="showDrug"
    :show-close="false"
    destroy-on-close
    title="药品查询"
    width="600px">
    <div style="margin-top: 1px;">
      <el-input placeholder="请输入药品内容" v-model="dName">
      <el-button slot="append" icon="el-icon-search" @click="getDrugData"></el-button>
     </el-input>
     </div>
     <div>
    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
     @current-change="handleCurrentChange"
      style="width: 100%">
      
      <el-table-column  label="" prop="drugName" ></el-table-column>
      <el-table-column  label="" align="right">
          <template slot-scope="scope">
        <el-button
          size="mini"
          type="text"
          @click="handleEdit(scope.$index, scope.row)">选择</el-button>
      </template>
      </el-table-column>
      </el-table>
      <!-- <pagination /> -->
      <div style="margin-top:15px;">
          <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChanges"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="sizes, prev, pager, next"
      :total="totalCount">
    </el-pagination>
      </div>
     </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="text" @click="showDrug = false">取消</el-button> -->
      <el-button :loading="crud.procesLoading" type="primary" @click="showDrug = false">取消</el-button>
    </div>
    </el-dialog>
  </el-dialog>
  
  </div>
</template>

<script>
import CRUD, { presenter, header } from "@crud/crud";
import rrOperation from "@crud/RR.operation";
import crudOperation from "@crud/CRUD.operation";
import pagination from "@crud/Pagination";
import roamForm from "./moudle/form";
import crudRoam from "@/api/roam/roam";
import { add, edit ,del,queryStoreName,queryStore,drugDetail,getSuppliers,updateDrug,getDrugs} from "@/api/roam/roam";
import udOperation from '@crud/UD.operation';

let defaultCrud = CRUD({
  title: "药品流转",
  url: "/api/circulation/getDrugCirculation",
  sort: ['id,desc'],
  crudMethod: { ...crudRoam },
  query: {drugName: null,fromStoreId: null, toStoreId: null,status:null},
  hideColumns: ["fromDrugId","fromStoreName","toDrugName","toDrugId"],
});

export default {
  name: "roam",
  components: { crudOperation, rrOperation, pagination, roamForm, udOperation },
  mixins: [presenter(defaultCrud), header()],
  data() {
    return {
        rules: {
        contentName: [
          { required: false, message: '', trigger: 'blur' }
        ],
        content: [
          { required: false, message: '', trigger: 'blur' }
        ]
      },
      ruless: {
        status: [
          { required: false, message: '', trigger: 'blur' }
        ],
      },
      permission: [
        {
          type: "add",
          position: 1,
          permission: ["admin", "commission:add"]
        }
      ],
      statusList: [
        {id: 0, text: "正常"},
        {id: 1, text: "失效"}
      ],
      statusLists: [
          {id: 1, text: "请选择"},
        {id: 2, text: "完成"},
        {id: 3, text: "取消"}
      ],
      pharmacyId: null,
      showDialog: false,
      showEdit:false,
      showDetail:false,
      showClose:false,
      showDrug:false,
      drugSelect:null,
      drugName:'',
      drugFlage:1,
      tableData:[],
      detailData:{},
      updateUserName:null,
      updateUserId:null,
      timeMode:'',
      storeName:'',
      scoreList:[],
      lzStoreId:null,
      userAccount:'',
      durgSelectFlage:1,
      dName:'',
      dStoreId:'',
      cfStoreId:'',
      currentPage:1,
      pageSize:10,
      totalCount:0,
    }
  },
  created() {
    this.$store.dispatch("GetInfo").then(res => {
      this.updateUserName = res.nickName;
      this.updateUserId = res.pharmacyId;
      this.userAccount = res.pharmacyId;
      this.crud.toQuery();

      this.scoreList = [];
    queryStore(this.userAccount).then(res => {
        
        res.forEach(store => {
          if(store.storeId == this.updateUserId){
             this.scoreList.push({
            value: store.cptStoreId,
            label: store.cptStoreName
          });
          }else{
            this.scoreList.push({
            value: store.storeId,
            label: store.storeName
          });
          }
        });
        
      }).catch(() => {
      });

    });
    queryStoreName().then(res => {
        this.storeName = res;
      });

    
  },
  methods: {
      handleEdit(index, row) {
        this.showDrug = false;
        console.log(this.durgSelectFlage);
        console.log(index, row);
        if(this.durgSelectFlage == 1){
            this.detailData.fromDrugId = row.id;
            this.detailData.fromDrugName = row.drugName;
        }else{
            this.detailData.toDrugId = row.id;
            this.detailData.toDrugName = row.drugName;
        }
      },
      handleCurrentChange(val) {
          console.log(val);
      },
      handleSizeChange(val){
        console.log(val);
        this.pageSize = val;
        this.getDrugData();
    
    },
    handleCurrentChanges(val) {
       this.currentPage = val;
       this.getDrugData();
      },
    selectDrug(index){
        this.durgSelectFlage = index;
        if(index == 1){
            this.dName = this.detailData.fromDrugName;
            this.dStoreId = this.detailData.fromStoreId;
        }else{
            this.dName = this.detailData.toDrugName;
            this.dStoreId = this.detailData.toStoreId;
        }

        var params = {
            'drugName':this.dName,
            'page':this.currentPage,
            'size':this.pageSize,
            'pharmacyId':this.dStoreId
        };

        getDrugs(params).then(res => {
        this.drugFlage = index;
        this.tableData = res.content;
        this.totalCount = res.totalElements;
        this.drugSelect = null;
        this.showDrug = true;
        
      }).catch(() => {
      });
    },
    getDrugData(){
      var params = {
            'drugName':this.dName,
            'page':this.currentPage,
            'size':this.pageSize,
            'pharmacyId':this.dStoreId
        };
        
        getDrugs(params).then(res => {
        this.tableData = res.content;
        this.totalCount = res.totalElements;
        
        
      }).catch(() => {
      });
    },
    onResetQuery() {
    //   this.query.pharmacyId = this.pharmacyId;
    },
    contentStatus(type){
        switch (type) {
            case 0:
                return '正常';
                break;
             case 1:
                return '失效';
                break;
            default:
                break;
        }
    },
    onchangeDate(e){
this.query.startPlanTime = e[0];
this.query.endPlanTime = e[1];
    },
    onChangeEStatus(e){
        
        this.detailData.status = e;
    },
    cancelClick(){
        this.showEdit = false;
        this.showClose = false;
        this.crud.toQuery();
    },
    onClickUpdate(){
      if(!this.detailData.fromDrugId||!this.detailData.toDrugId){
        return;
      }
     updateDrug(this.detailData).then(() => {
        this.showEdit = false;
        this.showClose = false;
        this.showClose = false;
        this.showDetail = false;
        this.crud.toQuery();
      })
    },
    onEdit(row,index){
        this.detailData = {};
        this.detailData = row;
        this.detailData.toStoreId = this.detailData.toStoreId.toString();
        if(index == 1){
            this.showEdit = true;
        }else if(index == 2){
            this.$confirm('将要删除该流转? 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          this.detailData.status = -1;
        updateDrug(this.detailData).then(() => {
        this.showEdit = false;
        this.showClose = false;
        this.showClose = false;
        this.showDetail = false;
        this.crud.toQuery();
      })
      }); 
        }else if(index ==3){
            this.$confirm('将要启用该流转? 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detailData.status = 0;
        updateDrug(this.detailData).then(() => {
        this.showEdit = false;
        this.showClose = false;
        this.showClose = false;
        this.showDetail = false;
        this.crud.toQuery();
      })
      }); 
        }else if(index ==4){
            this.$confirm('将要禁用该流转? 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detailData.status = 1;
        updateDrug(this.detailData).then(() => {
        this.showEdit = false;
        this.showClose = false;
        this.showClose = false;
        this.showDetail = false;
        this.crud.toQuery();
      })
      }); 
        }

    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }
  .body-content{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  
  .addPrescription{
    text-align: right;
    color: cornflowerblue;
    font-size: 14px;
  }
 
</style>
